<template>

  <div class="main" id="main">
    <mdui-navigation-rail contained class="nav" v-show="route.meta.showMenu">
      <!-- <mdui-tooltip content="首页" placement="right">
        <mdui-navigation-rail-item @click="rp('/')" icon="home"></mdui-navigation-rail-item>
      </mdui-tooltip>

      <mdui-tooltip content="笔记" placement="right">
        <mdui-navigation-rail-item icon="book" @click="rp('/note')"></mdui-navigation-rail-item>
      </mdui-tooltip> -->

      <mdui-tooltip content="便签" placement="right">
        <mdui-navigation-rail-item @click="rp('/memo')" icon="event_note"></mdui-navigation-rail-item>
      </mdui-tooltip>
      <!-- <mdui-tooltip content="代码片段" placement="right">
        <mdui-navigation-rail-item @click="rp('/code')" icon="article"></mdui-navigation-rail-item>
        </mdui-tooltip>
        -->

      <mdui-button-icon id="theme" slot="bottom" @click="t.toggleTheme" style="margin-bottom: 10px;"></mdui-button-icon>

      <mdui-button-icon @click="rp('/setting')" icon="settings" slot="bottom">

      </mdui-button-icon>

    </mdui-navigation-rail>

    <div class="view scrollbar">
      <RouterView></RouterView>
    </div>
  </div>
  <mdui-tooltip content="开始记录">
    <mdui-fab icon="edit" class="edit" @click="ipcRenderer.send('memo-window')"></mdui-fab>
  </mdui-tooltip>


</template>

<style scoped>
.main {
  height: 100vh;
  width: calc(100% - 80px);
  z-index: 1;
}

.nav {
  /*右边框*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: fixed;
  top: 0;
  left: 0;
}

.edit {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.view {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>


<script setup>
import { RouterLink, RouterView } from 'vue-router'

import { onMounted, ref, toRaw, watch } from 'vue'
import router from './router';
//const s = window.require("../assets/setting.js");
import s from "@/assets/setting.js";
import t from "@/assets/theme.js";
import { useRoute } from "vue-router"
import e from 'cors';
import { useIpcRenderer } from "@vueuse/electron";
const ipcRenderer = useIpcRenderer();


// 拿到meta
let route = toRaw(useRoute());



s.getAllSetting().then(res => {
  localStorage.setItem("config", JSON.stringify(res));
  let theme = res.setting.theme;
  if (theme == "auto") {
    let is_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (is_dark) {
      t.checkTheme("dark", false);
    } else {
      t.checkTheme("light", false);
    }
  } else {
    t.checkTheme(theme, false);
  }
  t.changeColorTheme(res.setting.color_theme);
}).catch(err => {
  console.error(err);
})


const rp = (path) => {
  router.push(path)

}

onMounted(() => {

  t.checkTheme()
  if (!route.meta.showMenu) {
    document.querySelector(".view").style.width = "100vw";
    document.querySelector(".edit").style.display = "none";
  }
})
window.da = route
</script>